<template>
<div>
  <h1 @click="getOrder">我的订单</h1>
  <div>
    <el-table
      :data="orderList"
      style="width: 100%;">
      <el-table-column
        prop="id"
        label="id"
        width="180" v-if="false">
      </el-table-column>
      <el-table-column
        prop="orderNumber"
        label="订单号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="180">
      </el-table-column>
      <el-table-column
        prop="totalPrice"
        label="总金额"
        width="180">
      </el-table-column>
      <el-table-column
        prop="unikeName"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="uaddr"
        label="取餐地址"
        width="180">
      </el-table-column>
      <el-table-column
        prop="offTime"
        label="取餐时间"
        width="180">
      </el-table-column>
      <el-table-column
        prop="info"
        label="备注"
        width="180">
      </el-table-column>
      <el-table-column
        prop=""
        label="操作"
        width="400">
        <template slot-scope="scope">
          <el-button type="warning" size="min" @click="complete(scope.row.id)"v-if="scope.row.status===1">确认取餐</el-button>
          <el-button type="danger" size="min" @click="cancelOrder(scope.row.id)"v-if="scope.row.status===1">取消订单</el-button>
          <el-button type="success" @click="payOrder(scope.row.id)"v-if="scope.row.status===0">支付</el-button>
          <a type="text" style="color: #ff1919" v-if="scope.row.status===3">已完成</a>
          <a type="text" style="color: #ff8e28" v-if="scope.row.status===4">退款中</a>
          <a type="text" style="color: #62e70b" v-if="scope.row.status===5">已退款</a>
        </template>
      </el-table-column>
    </el-table>
  </div>
</div>
</template>

<script>
export default {
  name: "Order",
  data() {
    return {
      orderList: [{
        id: '',
        status: '',
        totalPrice:'',
        orderNumber: '',
        unikeName: '',
        uaddr: '',
        uid: '',
        createTime: '',
        offTime: '',
        info: ''
      }]
    }
  },
  methods: {
    //取餐成功
    complete(id){
      this.$axios({
        method: 'get',
        url: '/order/complete',
        params: {
          id
        }
      })
      .then(res => {
        this.getOrder()
        alert('已确认')
      })
    },
    //取消订单
    cancelOrder(id){
      this.$axios({
        method: 'get',
        url: '/order/cancelOrder',
        params: {
          id
        }
      }).then(res=>{
          this.getOrder()
        console.log(res.data.message)
        alert(res.data.message)
        })
    },
    //支付
    payOrder(id){
      const loading = this.$loading({
        lock: true,
        text: 'Loading 支付中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.$axios({
        method: 'get',
        url: '/order/payOrder',
        params: {
          id
        }
      }).then(res=>{
        this.getOrder()
        loading.close();
        alert("支付成功！")
      })
    },
    //获取所有订单
    getOrder(){
      this.$axios({
        method: 'get',
        url: '/order/getOrder'
      }).then(res => {
        this.orderList=res.data.data.data
      })
    }
  },
  created() {
    this.getOrder()
  }
}
</script>

<style scoped>

</style>
